<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="add-plugin.html">

<dom-module id="empty-state">
    <template>
        <style>
            :host {
                display: flex;
                align-items: center;
                justify-content: center;
                height: calc(100vh - 250px);
            }

            #empty-state {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            p {
                max-width: 300px;
            }

            add-plugin {
                display: inline-block;
                margin-top: 40px;
            }
        </style>

        <div id="empty-state">
            <div>
                <svg width="77" viewBox="0 0 77 101" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Canvas" transform="translate(39 -2555)">
                        <g id="Group 11">
                            <use xlink:href="#path0_fill" transform="translate(-39 2555)" fill="#505C66" id="Rectangle 4" />
                            <use xlink:href="#path1_fill" transform="translate(-35 2559)" fill="#C4C4C4" id="Ellipse 3" />
                            <use xlink:href="#path1_fill" transform="translate(-29 2559)" fill="#C4C4C4" id="Ellipse 3.1" />
                            <use xlink:href="#path1_fill" transform="translate(-23 2559)" fill="#C4C4C4" id="Ellipse 3.2" />
                            <use xlink:href="#path2_fill" transform="translate(-34.536 2566)" fill="#FFF" id="Rectangle 4" />
                            <use xlink:href="#path3_fill" transform="translate(-14 2581)" fill="#505C66" id="Ellipse" />
                            <use xlink:href="#path3_fill" transform="translate(8 2581)" fill="#505C66" id="Ellipse" />
                            <use xlink:href="#path4_fill" transform="translate(-7 2591)" fill="#505C66" id="Rectangle 3" />
                            <use xlink:href="#path5_fill" transform="translate(-31 2648)" fill-opacity=".4" id="Ellipse 2" />
                        </g>
                    </g>
                    <defs>
                        <path id="path0_fill" d="M0 4a4 4 0 0 1 4-4h69a4 4 0 0 1 4 4v62a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4z" />
                        <path id="path1_fill" d="M4 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
                        <path id="path2_fill" d="M0 0h68.073v55H0V0z" />
                        <path id="path3_fill" d="M5 2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                        <path id="path4_fill" d="M0 2a2 2 0 0 1 2-2h9a2 2 0 1 1 0 4H2a2 2 0 0 1-2-2z" />
                        <path id="path5_fill" d="M62 4c0 2.21-13.88 4-31 4C13.88 8 0 6.21 0 4s13.88-4 31-4c17.12 0 31 1.79 31 4z" />
                    </defs>
                </svg>
                <h3>No plugins in your dashboard</h3>
                <p>Start by adding a plugin to populate your dashboard.</p>
                <add-plugin></add-plugin>
            </div>
        </div>

    </template>
    <script>
        class EmptyState extends Polymer.Element {
            static get is() { return 'empty-state'; }

        }

        window.customElements.define(EmptyState.is, EmptyState);
    </script>
</dom-module>
